<template>
  <div class="order">
    <center>
      <h3>我的设置</h3>
      <hr />
    </center>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="我的账号订单" name="1"
        >我的账号订单</van-collapse-item
      >
      <van-collapse-item title="我的收藏点赞" name="2"
        >我的账号订单</van-collapse-item
      >
      <van-collapse-item title="我的时间" name="3"
        ><van-count-down :time="time"
      /></van-collapse-item>
    </van-collapse>
    <br />
    <center>我的地址</center>
    <hr />
    <div class="order-list" v-if="list.length > 0">
      <div class="ord" v-for="data in list" :key="data._id">
        <van-checkbox v-model="data.checked" />
        <div class="ord-r">
          <p>{{ data.receiver }}</p>
          <p>
            {{ data.address }}
            <button class="btn" v-show="data.checked" @click="del(data._id)">
              删除
            </button>
          </p>
          <p>{{ data.regions }}</p>
        </div>
      </div>
    </div>
    <div v-else>订单为空，赶紧去添加</div>
  </div>
</template>

<script>
import { reqOrderAPI, reqDelOrderAPI, reqDelOrdersAPI } from "@/api/order";
export default {
  data() {
    return {
      list: [],
      activeNames: ["1"],
      time: 30 * 60 * 60 * 1000,
    };
  },
  computed: {
    checked: {
      set(flag) {
        this.list.map((item) => this.$set(item, "checked", flag));
      },
      get() {
        if (this.list.length == 0) {
          return false;
        } else {
          return (
            this.list.length ==
            this.list.filter((item) => item.checked == true).length
          );
        }
      },
    },
    selectgoods() {
      var selectlist = [];
      this.list.forEach((item) => {
        if (item.checked) {
          selectlist.push({
            product: item._id, //和前面保持一致
          });
        }
      });
      return selectlist;
    },
  },
  watch: {},

  methods: {
    //   获取订单列表
    async getOrders() {
      const result = await reqOrderAPI();
      console.log(result);
      this.list = result.orders;
    },
    // 单个删除
    async del(id) {
      const result = await reqDelOrderAPI(id);
      console.log(result);
      //   删除成功，再次调用接口
      this.getOrders();
    },
    async onSubmit() {
      console.log("onSubmit");
      const ids = [];
      //   在提交的时候把选中的项的id组成数组ids
      this.selectgoods.forEach((item) => {
        ids.push(item.product);
      });
      //   数据收集完成调用批量删除接口
      const result = await reqDelOrdersAPI(ids);
      console.log(222, result);
      this.getOrders();
    },
  },
  created() {
    this.getOrders();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.ord {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.ord-r {
  flex: 1;
  padding-left: 10px;
}
.ord p {
  line-height: 15px;
  font-size: 12px;
  color: #000;
  height: 22px;
}
.btn {
  color: #fff;
  background-color: red;
}
</style>
